<template>
  <div class="bg-white rounded-lg shadow-md p-5 mb-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-lg font-bold">费用预估</h3>
      <div class="flex items-center">
        <label class="text-sm text-gray-600 mr-2">人数:</label>
        <select
            class="border rounded py-1 px-2"
            v-model="travelers"
        >
          <option v-for="num in 5" :key="num" :value="num">{{ num }}人</option>
        </select>
      </div>
    </div>

    <div class="space-y-3">
      <div class="flex justify-between pb-2 border-b">
        <div class="flex items-center">
          <i class="fas fa-train mr-2 text-blue-600"></i>
          <span>火车</span>
        </div>
        <span class="font-medium">{{ costs.transport.train }}</span>
      </div>
      <div class="flex justify-between pb-2 border-b">
        <div class="flex items-center">
          <i class="fas fa-car mr-2 text-purple-600"></i>
          <span>出租车</span>
        </div>
        <span class="font-medium">{{ costs.transport.taxi }}</span>
      </div>
      <div class="flex justify-between pb-2 border-b">
        <div class="flex items-center">
          <i class="fas fa-bed mr-2 text-indigo-600"></i>
          <span>住宿</span>
        </div>
        <span class="font-medium">{{ costs.accommodation }}</span>
      </div>
      <div class="flex justify-between pb-2 border-b">
        <div class="flex items-center">
          <i class="fas fa-utensils mr-2 text-orange-600"></i>
          <span>餐饮</span>
        </div>
        <span class="font-medium">{{ costs.meals }}</span>
      </div>
      <div class="flex justify-between pb-2 border-b">
        <div class="flex items-center">
          <i class="fas fa-camera mr-2 text-green-600"></i>
          <span>门票</span>
        </div>
        <span class="font-medium">{{ costs.tickets }}</span>
      </div>
    </div>

    <div class="mt-4 pt-3 border-t-2 flex justify-between items-center">
      <span class="font-bold text-lg">总计 ({{ travelers }}人)</span>
      <span class="font-bold text-xl text-red-600">{{ getTotalCost }}</span>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'CostSummary',
  props: {
    costs: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const travelers = ref(1);

    // 计算总费用
    const getTotalCost = computed(() => {
      if (!props.costs) return '0元';

      const costString = props.costs;
      const costRange = costString.split('-').map(val => {
        return val.replace(/[^0-9]/g, ''); // 提取数字
      });

      if (costRange.length === 2) {
        const minCost = parseInt(costRange[0]) * travelers.value;
        const maxCost = parseInt(costRange[1]) * travelers.value;
        return `${minCost}-${maxCost} 元`;
      } else if (costRange.length === 1) {
        const cost = parseInt(costRange[0]) * travelers.value;
        return `${cost} 元`;
      }

      return costString;
    });

    return {
      travelers,
      getTotalCost
    };
  }
};
</script>